<!--
 描述: 主页模板
 作者: Jack Chen
 日期: 2020-06-15
-->

<template>
    <div class="home-container">
        <Header />
  
      <div class="content clearfix">
        <div class="list">
          <Form :model="formFind" ref="formFind" style="flex-wrap: wrap;">
            <Col span="5">
                <FormItem label="呢称：" prop="nickname" label-position="left" :label-width=60>
                    <Input v-model="formFind.nickname" placeholder="请输入呢称" />
                </FormItem>
            </Col>
            <Col span="6">
              <FormItem label="词汇包：" prop="book_id" label-position="left" :label-width=70>
                <Select v-model="formFind.book_id" placeholder="请选择词汇包" >
                  <Option v-for="(item,index) in allBooks" :key="item.id" :value="item.id">{{ item.name }}</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="8">
                <FormItem label="打卡时间：" prop="gmt_create" label-position="left" :label-width=90>
                  <DatePicker :editable="false" v-model="formFind.gmt_create" type="daterange" placeholder="请选择日期范围"></DatePicker>
                </FormItem>
            </Col>
            <Col span="5">
                <FormItem label="上课老师：" prop="master_id" label-position="left" :label-width=100>
                    <Select v-model="formFind.master_id" placeholder="请选择上课老师" >
                        <Option v-for="(item,index) in allMasters" :key="index" :value="item.value">{{ item.name }}</Option>
                    </Select>
                </FormItem>
            </Col>
            <Col span="4" style="text-align:center">
                <Button type="primary" icon="md-search" size="large" @click="getTaskList">查找记录</Button>
            </Col>
            <Col span="3" style="text-align:center">
                <Button type="info" icon="md-trash" size="large" @click="handleReset('formFind')">重置</Button>
            </Col>
          </Form>
            
        </div>
  
        <Table style='min-height: 60vmin;' :loading="loading" :columns="columns" :data="tableData">
          <template slot-scope="{ row, index }" slot="action">
           
            <Button type="primary" ghost style="margin-right: 10px" @click="edit(index)">编辑</Button>
            <Button type="error" ghost @click="remove(row.id)">删除</Button>
          </template>
        </Table>
  
        <Page
          class-name="pagination"
          show-total
          show-sizer
          :total="total"
          @on-page-size-change="handlePageSizeChange"
          @on-change="handleCurrentChange"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          :current="pageNo"
          v-if="!loading && total > 0"
        />
      </div>
  
      <Footer />
  
    </div>
  </template>
  
  <script>
  import Header from '@/components/Header';  
  import Footer from '@/components/Footer'; 
  import store from '../store'
  import { 
    int2SingleString,
  } from '@/utils/global';
  import { 
    formatTime,
    formatDate
  } from '@/utils/valid';
  import { 
    getStudyLogList,
    getBookList,
    getUserList
  } from '@/utils/api';
  
  export default {
    name: 'Home',
    components: {
      Header,
      Footer
    },
    data() {
        return {
          normalUserID: 0,
          loading: true,
          total: 0,
          pageNo: 1,
          pageSize: 50,
          pageSizeOpts: [10,50,100,200],
          textBtn: '提交',
          type: 1, // 1:添加 2:编辑
          title: '添加视频',
          isShow: false,
          deleteId: 0,  // 临时保存删除id
          styles: {
            height: 'calc(100% - 55px)',
            overflow: 'auto',
            paddingBottom: '53px',
            position: 'static'
          },
          formFind: {
            nickname: '',
            book_id: 0,
            gmt_create: [],
            master_id: -1
          },
          columns: [
            {
              title: '昵称',
              key: 'nickname',
              width: 300,
              align: 'center'
            },
            {
              title: '词汇包',
              key: 'name',
              width: 400,
              align: 'center'
            },
            {
              title: '打卡单词数',
              key: 'words',
              width: 150,
              align: 'center',
              render: (h, params) => {
                const row = params.row;
                const text = row.words.split(',').length;
                return h('div', text);
              }
            },
            {
              title: '遗忘个数',
              key: 'no_count',
              width: 100,
              align: 'center'
            },
            {
              title: '上课老师',
              key: 'master_id',
              width: 160,
              render: (h,params) => {
                  const row = params.row;
                  return h('div', int2SingleString( row.master_id, this.allMasters));
              }
            },
            {
              title: '打卡时间',
              key: 'gmt_create',
              render: (h, params) => {
                const row = params.row;
                const text = formatTime(row.gmt_create);
                return h('div', text);
              }
            },
          ],
          tableData: [],
          allBooks: [],
          allMasters: [],
        }
    },
    computed: {
    },
    created() {},
    mounted() {
      
      this.normalUserID = 0;
      let user_type = store.state.userInfo.data.userData.user_type;
      if(user_type != 1){
        this.normalUserID = store.state.userInfo.data.userData.id;
      }
      this.getAllBookList();
      this.getAllMasterList();
      setTimeout(() => {
        this.getTaskList();
      }, 1000);
    },
    methods: {
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange(val) {
        console.log(val)
        this.pageNo = val;
        this.getTaskList();
      },
      handlePageSizeChange(val) {
        console.log(val)
        this.pageSize = val;
        this.getTaskList();  
      },
      // 获取词汇包列表数据
      getTaskList() {
        this.loading = true;
  
        console.log(this.formFind)
        let data = {
          nickname: this.formFind.nickname,
          book_id: this.formFind.book_id,
          gmt_create: [formatDate(this.formFind.gmt_create[0]), formatDate(this.formFind.gmt_create[1])],
          master_id: this.formFind.master_id
        }
        let params = {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          params: data
        }
  
        getStudyLogList(params)
        .then(res => {
          console.log('打卡记录列表===', res);
          this.loading = false;
          if (res.code == 0 && res.data) {
            this.tableData = res.data.rows;
            for( let i of this.tableData ){
              let findItem = res.data.studyWords.find(item => item.id == i.study_id);
              if(findItem){
                i.nickname = findItem.nickname;
                i.words = findItem.words;
                let bookItem = this.allBooks.find( item=>item.id == findItem.book_id);
                if( bookItem){
                  i.name = bookItem.name;
                }
              }
            }
            this.total = res.data.total;
          } else {
            this.tableData = [];
            this.total = 0;
          }
        })
        .catch(() => {
          this.loading = false;
        })
      },
      // 重置表单
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      getAllBookList() {
        let params = {
          pageSize: 256,
          params: {}
        }
  
        console.log( 'getAllBookList', params)
        getBookList(params)
        .then(res => {
          console.log('词汇包列表===', res);
          this.allBooks = [];
          if (res.code == 0 && res.data) {
            this.allBooks = res.data.rows;
          }
          this.allBooks.unshift({id: 0, name: '全部'});
        })
        .catch(() => {
          this.allBooks = [];
        })
      },
      getAllMasterList() {
        let params = {
          pageSize: 999,
          params: {user_type: 2}
        }
  
        console.log( 'getAllMasterList', params)
        this.allMasters = [{name:'全部', value:-1}, {name:'无', value:0}];
        getUserList(params)
        .then(res => {
          console.log('老师列表===', res);
          if (res.code == 0 && res.data) {
            for( let item of res.data.rows){
              this.allMasters.push({name:item.nickname, value: item.id})
            }
          }
        })
        .catch(() => {
        })
      },
    }
        
  }
  </script>
  
  <style lang="scss" scoped>
  .home-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .content {
      .list {
        display: flex;
        justify-content: space-between;
        align-content: center;
        Form {
          display: flex;
        } 
      }
    }
  
  }	
  </style>
  <style lang="scss">
  .ivu-table-tip table td {
    width: 100% !important;
  }
  /*.ivu-input-icon-validate {
    display: none !important;
  }*/
  .pagination {
    float: right;
    margin: 20px 0;
  }
  
  .demo-drawer-footer{
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    border-top: 1px solid #e8e8e8;
    padding: 16px;
    background: #fff;
    display: flex;
    justify-content: space-around;
  }
  </style>